<template>
    <div class="app-container">
        <el-form :inline="true" ref="queryRef" label-position="right" :model="params" label-width="200px" :rules="rules">
            <el-row justify="center">
                <el-col :span="11">
                    <el-form-item label="ID：" prop="id">
                        <el-input v-model="params.id" placeholder="请输入" :disabled="isShow || isRestore" clearable />
                    </el-form-item>
                </el-col>
                <el-col :span="11">
                    <el-form-item label="区划代码：" prop="zoningCode">
                        <el-input v-model="params.zoningCode" placeholder="请输入" :disabled="isShow || isRestore" clearable />
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row justify="center">
                <el-col :span="11">
                    <el-form-item label="区域：" prop="region">
                        <el-col :span="8">
                            <el-form-item prop="province">
                                <el-select v-model="params.province" placeholder="请选择省" @change="chooseProvince" clearable
                                    value-key="id" :disabled="isShow">
                                    <el-option v-for="item in provinceData" :key="item.id" :label="item.name"
                                        :value="item"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item prop="city">
                                <el-select v-model="params.city" placeholder="请选择市" @change="chooseCity" clearable
                                    value-key="id" :disabled="isShow">
                                    <el-option v-for="item in cityData" :key="item.id" :label="item.name"
                                        :value="item"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item prop="county">
                                <el-select v-model="params.county" placeholder="请选择县" @change="chooseCounty" clearable
                                    value-key="id" :disabled="isShow">
                                    <el-option v-for="item in areaData" :key="item.id" :label="item.name"
                                        :value="item"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-form-item>
                </el-col>
                <el-col :span="11">
                    <el-form-item label="乡镇街道：" prop="township">
                        <el-input v-model="params.township" placeholder="请输入" :disabled="isShow" clearable />
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row justify="center">
                <el-col :span="11">
                    <el-form-item label="全省乡镇个数：" prop="provinceNumber" class="form-location">
                        <el-col :span="5">
                            <el-form-item>
                                <el-input v-model="params.provinceStreetNumber" placeholder="请输入" :disabled="isShow || isRestore"
                                    clearable />
                            </el-form-item>
                        </el-col>
                        <el-col :span="2">街道</el-col>
                        <el-col :span="5">
                            <el-form-item>
                                <el-input v-model="params.provinceTownshipNumber" placeholder="请输入" :disabled="isShow || isRestore"
                                    clearable />
                            </el-form-item>
                        </el-col>
                        <el-col :span="2">乡镇</el-col>
                    </el-form-item>
                </el-col>
                <el-col :span="11">
                    <el-form-item label="全市乡镇个数：" prop="cityNumber" class="form-location">
                        <el-col :span="5">
                            <el-form-item>
                                <el-input v-model="params.cityStreetNumber" placeholder="请输入" :disabled="isShow || isRestore"
                                    clearable />
                            </el-form-item>
                        </el-col>
                        <el-col :span="2">街道</el-col>
                        <el-col :span="5">
                            <el-form-item>
                                <el-input v-model="params.cityTownshipNumber" placeholder="请输入" :disabled="isShow || isRestore"
                                    clearable />
                            </el-form-item>
                        </el-col>
                        <el-col :span="2">乡镇</el-col>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row justify="center">
                <el-col :span="11">
                    <el-form-item label="全县区乡镇个数：" prop="countyNumber" class="form-location">
                        <el-col :span="5">
                            <el-form-item>
                                <el-input v-model="params.countyStreetNumber" placeholder="请输入" :disabled="isShow || isRestore"
                                    clearable />
                            </el-form-item>
                        </el-col>
                        <el-col :span="2">街道</el-col>
                        <el-col :span="5">
                            <el-form-item>
                                <el-input v-model="params.countyTownshipNumber" placeholder="请输入" :disabled="isShow || isRestore"
                                    clearable />
                            </el-form-item>
                        </el-col>
                        <el-col :span="2">乡镇</el-col>
                    </el-form-item>
                </el-col>
                <el-col :span="11">
                    <el-form-item label="乡镇/街道" prop="type">
                        <el-select v-model="params.type" placeholder="请选择" clearable :disabled="isShow">
                            <el-option v-for="item in [{ label: '乡镇', value: '0' }, { label: '街道', value: '1' }]"
                                :key="item.value" :label="item.label" :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row justify="center">
                <el-col :span="11">
                    <el-form-item label="峰值加速度/g：" prop="peakAcceleration">
                        <el-input v-model="params.peakAcceleration" placeholder="请输入" :disabled="isShow" clearable />
                    </el-form-item>
                </el-col>
                <el-col :span="11">
                    <el-form-item label="反应谱特征周期/s：" prop="responseSpectrum">
                        <el-input v-model="params.responseSpectrum" placeholder="请输入" :disabled="isShow" clearable />
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row justify="center">
                <el-col :span="11">
                    <el-form-item label="经度：" prop="longitude">
                        <el-input v-model="params.longitude" placeholder="请输入" :disabled="isShow" clearable />
                    </el-form-item>
                </el-col>
                <el-col :span="11">
                    <el-form-item label="纬度：" prop="latitude">
                        <el-input v-model="params.latitude" placeholder="请输入" :disabled="isShow" clearable />
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row justify="center">
                <el-col :span="11">
                    <el-form-item label="变更原因：" prop="reasonForChange">
                        <el-input v-model="params.reasonForChange" type="textarea" placeholder="请输入" style="width: 500px;"
                            :autosize="{ minRows: 3, maxRows: 10 }" show-word-limit maxlength="500" :disabled="isShow" clearable />
                    </el-form-item>
                </el-col>
                <el-col :span="11">
                    <el-form-item label="批准文件：" prop="approvalDocuments">
                        <el-input v-model="params.approvalDocuments" type="textarea" placeholder="请输入" style="width: 500px;"
                            :autosize="{ minRows: 3, maxRows: 10 }" show-word-limit maxlength="500" :disabled="isShow" clearable />
                    </el-form-item>
                </el-col>
            </el-row>
            <!-- 按钮 -->
            <el-row justify="center">
                <el-form-item class="bottom-button">
                    <el-button type="primary" @click="onConfig">确定</el-button>
                    <el-button type="primary" @click="onCancel">取消</el-button>
                </el-form-item>
            </el-row>
        </el-form>
    </div>
</template>

<script setup>
import { computed, reactive, toRefs } from 'vue';
// 引入省份和获取下级区域
import { getProvince, getChildArea } from '@/api/system/division';
// 引入接口
import {
    getGmpById, //根据id查询
    demolitionOrSave, // 撤设或新设
    restoreData, // 恢复
    getNumberByRegion //根据省市县查街道和乡镇个数
} from '@/api/groundMotionParamManage/groundMotionParamManage.js';

// 当前对象实例
const { proxy } = getCurrentInstance();
// 全局路由对象
const router = useRouter();
// 当前路由对象
const route = useRoute();

// 撤设\恢复
const isRestore = computed(() => route.query.type == 'demolition' || route.query.type == 'restore');
// 查看
const isShow = computed(() => route.query.gmpId && !route.query.type);

// 变量
const data = reactive({
    // 表单参数
    params: {
        id: '', //id
        zoningCode: '', //区划代码
        // provinceNumber: '', //全省乡镇个数：
        // cityNumber: '', //全市乡镇个数：
        // countyNumber: '', //全县区乡镇个数：
        // provinceStreetNumber: '',//省街道个数
        // provinceTownshipNumber: '',//省乡镇个数
        // cityStreetNumber: '',//市街道个数
        // cityTownshipNumber: '',//市乡镇个数
        // countyStreetNumber: '',//县街道个数
        // countyTownshipNumber: '',//县乡镇个数
        peakAcceleration: '', //峰值加速度/g
        responseSpectrum: '', //反应谱特征周期／s
        reasonForChange: '',//变更原因
        approvalDocuments: '',//批准文件
        latitude: '',//纬度
        longitude: '',//经度
        province: '',//省
        city: '',//市
        county: '',//县
        township: '', //乡
        type: '0',   //0或1   0乡镇 1街道
    },
    rules: {
        id: [{ required: true, pattern: /^\d{7}$/, message: '请输入七位数字', trigger: 'blur' }],
        zoningCode: [{ required: true, message: '请输入区划代码', trigger: 'blur', }],
        province: [{ required: true, message: '请选择区域', trigger: 'change', }],
        township: [{ required: true, message: '请输入乡镇街道', trigger: 'blur', }],
        peakAcceleration: [{ required: true, message: '请输入峰值加速度/g', trigger: 'blur', }],
        responseSpectrum: [{ required: true, message: '请输入反应谱特征周期/s', trigger: 'blur', }],
        longitude: [{ required: true, message: '请输入经度', trigger: 'blur', }],
        latitude: [{ required: true, message: '请输入纬度', trigger: 'blur', }],
        reasonForChange: [{ required: true, message: '请输入变更原因', trigger: 'blur' }],
        approvalDocuments: [{ required: true, message: '请输入批准文件', trigger: 'blur' }],
    }
});
const {
    // 表单参数
    params,
    rules
} = toRefs(data);

// 行政区划
const provinceData = ref([]); //省
const cityData = ref([]); //市
const areaData = ref([]); //区、县
/** 获取省列表 */
function getProvinceData() {
    getProvince().then(response => {
        provinceData.value = response.data;
    });
}
// 选择省份
function chooseProvince(value) {
    params.value.city = null;
    params.value.county = null;
    params.value.province = value.name;
    cityData.value = [];
    areaData.value = [];
    // 下级区域
    getChildArea(value.id).then(response => {
        cityData.value = response.data;
    });
}
// 选择城市
function chooseCity(value) {
    params.value.city = value.name;
    params.value.county = null;
    areaData.value = [];
    getChildArea(value.id).then(response => {
        areaData.value = response.data;
    });
}
// 选择区县
function chooseCounty(value) {
    params.value.county = value.name;
    //根据省市县查街道和乡镇个数
    queryByNmuber();
}
//根据省市县查街道和乡镇个数
const queryByNmuber = () => {
    if (params.value.province && params.value.city && params.value.county) {
        const query = {
            province: params.value.province,
            city: params.value.city,
            county: params.value.county
        };
        getNumberByRegion(query).then(res => {
            const { code, data } = res;
            if (code == 200 && data) {
                // 省、市、区县
                const { province, city, county } = data;
                params.value.provinceStreetNumber = province[0] || 0;
                params.value.provinceTownshipNumber = province[1] || 0;
                params.value.cityStreetNumber = city[0] || 0;
                params.value.cityTownshipNumber = city[1] || 0;
                params.value.countyStreetNumber = county[0] || 0;
                params.value.countyTownshipNumber = county[1] || 0;
            }
        }).catch(err => {
            console.log(err.message);
        });
    }
}

// 根据id查询
const queryById = () => {
    getGmpById({
        gmpId: route.query.gmpId
    }).then(res => {
        const { code, data } = res;
        if (res.code === 200 && res.data) {
            params.value = {
                ...data,
                // 行政区划数量
                provinceStreetNumber: data.provinceNumber[0],
                provinceTownshipNumber: data.provinceNumber[1],
                cityStreetNumber: data.cityNumber[0],
                cityTownshipNumber: data.cityNumber[1],
                countyStreetNumber: data.countyNumber[0],
                countyTownshipNumber: data.countyNumber[1],
            }
        }
    }).catch(err => {
        console.log(err.message);
    });
}
// 撤设或新设
const onDemolition = () => {
    let query = {
        ...params.value
    };
    if (route.query.type === 'add') {
        delete query.gmpId;
    }
    proxy.$refs['queryRef'].validate((valid, fields) => {
        if (valid) {
            demolitionOrSave(query).then(res => {
                if (res.code === 200 && res.data) {
                    proxy.$modal.msgSuccess('成功!');
                    // 跳转列表页
                    jumpToList();
                } else {
                    proxy.$modal.msgSuccess('设置失败！');
                }
            }).catch(err => {
                console.log(err.message);
            });
        } else {
            // 滚动到第一个需要提示的字段
            proxy.$refs['queryRef'].scrollToField(Object.keys(fields)[0])
        }
    })
}
// 恢复
const onRestore = () => {
    restoreData({
        gmpId: route.query.gmpId,
        originalId: route.query.originalId,
        approvalDocuments: params.value.approvalDocuments,
        reasonForChange: params.value.reasonForChange,
    }).then(res => {
        if (res.code === 200 && res.data) {
            proxy.$modal.msgSuccess('成功!');
            // 跳转列表页
            jumpToList();
        }
    }).catch(err => {
        console.log(err.message);
    });
}
// 确定
const onConfig = () => {
    if (route.query.type === 'demolition' || route.query.type === 'add'||route.query.type === 'restore') {
        proxy.$refs["queryRef"].validate(valid => {
            // 撤设或新设
            onDemolition();
        })
    } 
    // else if (route.query.type === 'restore') {
    //     // 恢复
    //     onRestore();
    // }
}
// 取消
const onCancel = () => {
    // 跳转列表页
    jumpToList();
}
// 跳转列表页
function jumpToList() {
    router.push({ path: '/groundMotionParamManage/groundMotionParam' });
}

// 挂载完成
onMounted(() => {
    // 获取行政区划数据
    getProvinceData();
    // 撤设、恢复、查看
    if (route.query.type != 'add') {
        //根据id查询
        queryById();
    }
});
</script>

<style  lang="scss" scoped>
.form-location {
    .el-form-item {
        margin-right: 0;
    }
}
</style>